<template>
<div>
  <div class="hearder">
    <div class="search">
      <input type="text"  placeholder="请输入spuId.." v-model="spuId">
      <div style="width: 10px;height: 50px;"></div>
      <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
    </div>
    <div class="add" @click="routerAdd">
     <div><i class="el-icon-plus"></i></div>
      <div style="width: 5px;height: 50px;"></div>
      新增
    </div>
    <div class="add"  style="background-color: #2AF598;margin-left: 15px" @click="getSpuList">
      <div><i class="el-icon-user"></i></div>
      <div style="width: 5px;height: 50px;" ></div>
      所有
    </div>
  </div>
  <div class="table">
    <el-table
        :data="dataList"
        style="width: 100%;">
      <el-table-column
          prop="id"
          header-align="center"
          align="center"
          width="70"
          label="id">
      </el-table-column>
      <el-table-column
          prop="title"
          header-align="center"
          align="center"
          :show-overflow-tooltip='true'
          label="标题">
      </el-table-column>
      <el-table-column
          prop="image"
          header-align="center"
          align="center"
          label="图片">
        <template slot-scope="scope">
          　<img :src="scope.row.image" width="40" height="40" @mousemove="imgDialog(scope.row.image)" @mouseout="imgOut"/>
        </template>
      </el-table-column>
      <el-table-column
          prop="status"
          header-align="center"
          align="center"
          label="状态">
        　<template slot-scope="scope">
              <el-tag type="success" style="line-height: 25px" v-if="scope.row.status == 0">有效</el-tag>
              <el-tag type="danger" style="line-height: 25px" v-if="scope.row.status == 1">失效</el-tag>
              <el-tag type="warning" style="line-height: 25px" v-if="scope.row.status == 2">恢复待审</el-tag>
              <el-tag type="warning" style="line-height: 25px" v-if="scope.row.status == 3">新增待审</el-tag>
              <el-tag type="danger" style="line-height: 25px" v-if="scope.row.status == 4">商品违规</el-tag>
        　</template>
      </el-table-column>
      <el-table-column
          prop="brand"
          header-align="center"
          align="center"
          :show-overflow-tooltip='true'
          label="品牌">
      </el-table-column>
      <el-table-column
          prop="store"
          header-align="center"
          align="center"
          :show-overflow-tooltip='true'
          label="店铺">
      </el-table-column>
      <el-table-column
          prop="name"
          header-align="center"
          align="center"
          :show-overflow-tooltip='true'
          label="商品名称">
      </el-table-column>
      <el-table-column
          prop="type"
          header-align="center"
          align="center"
          label="类型">
      </el-table-column>
      <el-table-column
          prop="price"
          header-align="center"
          align="center"
          label="价格">
      </el-table-column>
      <el-table-column
          prop="wareTotal"
          header-align="center"
          align="center"
          label="库存">
      </el-table-column>
      <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="300"
          label="操作">
        <template slot-scope="scope">
          <el-button type="success" size="small" >修改</el-button>
          <el-button type="danger" size="small" @click="invalid(scope.row.id)" v-if="scope.row.status==0">失效</el-button>
          <el-button type="warning" size="small" @click="recover(scope.row.id)" v-if="scope.row.status==1">重新上架</el-button>
          <el-button type="primary" size="small" @click="param(scope.row.id)">参数</el-button>
          <el-button type="success" size="small" @click="ware(scope.row.id)">库存</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="page" v-if="dataList.length>2">
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[7,15,20,30,50,200]"
          :page-size='pageSize'
          layout="total, sizes, prev, pager, next, jumper"
          :total='total'>
      </el-pagination>
    </div>
  </div>
  <div class="imgflolt" v-if="this.imgDialog!=null"  width="20%" height="22%" style="border-radius: 4px;">
    <img :src='imgSrc'>
  </div>
  <div class="param-cont">
    <el-dialog title="商品参数" :visible.sync="paramDialog">
      <div class="param">
        <div class="param-item" v-for="paramItem in paramList">
          <div v-for="(value , key) in paramItem" :key="key"  class="param-item1">
            <div class="itemleft">
              {{key}}
            </div>
            <div class="itemright" >{{value}}</div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
  <div class="param-cont">
    <el-dialog title="库存" :visible.sync="wareDialog">
      <el-table
          :data="skulist"
          border
          style="width: 100%;">
        <el-table-column
            prop="id"
            header-align="center"
            align="center"
            label="id">
        </el-table-column>
        <el-table-column
            prop="type"
            header-align="center"
            align="center"
            label="类型">
        </el-table-column>

        <el-table-column
            prop="size"
            header-align="center"
            align="center"
            label="型号">
        </el-table-column>
        <el-table-column
            prop="style"
            header-align="center"
            align="center"
            label="样式">
        </el-table-column>
        <el-table-column
            prop="status"
            header-align="center"
            align="center"
            label="状态">
          　<template slot-scope="scope">
          　　　　  <el-tag type="success" style="line-height: 25px" v-if="scope.row.status == 0">有效</el-tag>
                  <el-tag type="danger" style="line-height: 25px" v-if="scope.row.status == 1">失效</el-tag>
                  <el-tag type="warning" style="line-height: 25px" v-if="scope.row.status == 2">恢复待审</el-tag>
                  <el-tag type="warning" style="line-height: 25px" v-if="scope.row.status == 3">新增待审</el-tag>
                  <el-tag type="danger" style="line-height: 25px" v-if="scope.row.status == 4">商品违规</el-tag>
          　</template>
        </el-table-column>
        <el-table-column
            prop="ware"
            header-align="center"
            align="center"
            label="库存">
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
  <loading></loading>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》'
import loading from "@/views/common/loading";
export default {
//import引入的组件需要注入到对象中才能使用
components: {
  loading
},
props: {},
data() {
//这里存放数据
return {
  dataList:[],
  pageSize:7,
  pageNum:1,
  imgSrc:null,
  total:0,
  spuId:null,
  paramDialog:false,
  paramList:[],
  skulist:[],
  wareDialog:false

};
},
//计算属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {

},
//方法集合
methods: {
  getSpuList(){
    this.$http({
      url: "product/spu/page",
      method: "post",
      data:this.$http.adornData({
        pageSize:this.pageSize,
        pageNum:this.pageNum
      })
    }).then((res)=>{
      // console.log(res.data.page)
      this.dataList = res.data.page.list
      this.total = res.data.page.totalCount
    })
  },
  imgDialog(img){
    this.imgSrc = img
  },
  imgOut(){
    this.imgSrc = null
  },
  handleSizeChange(val) {
    this.pageSize = val
    this.getSpuList()
  },
  handleCurrentChange(val) {
    this.pageNum = val
    this.getSpuList()

  },
  search(){
    this.$http({
      url:"product/spu/search",
      method:"post",
      data:{
        spuId:this.spuId
      }
    }).then((res)=>{
      // console.log(res)
     if (res.data.list!=null){
       this.dataList = res.data.list
     }
    })
  },
  invalid(id){
    this.$http({
      url: "product/spu/invalid",
      method:"post",
      data:id
    }).then((res)=>{
      if (res.data.code){
        this.getSpuList()
      }
    })
  },
  recover(id){
    this.$http({
      url: "product/spu/recover",
      method:"post",
      data:{
        spuId:id,
        userId:sessionStorage.getItem("userId")
    }
  }).then((res)=>{
    this.getSpuList()
    })
},
  param(id){
    this.$http({
      url:"product/spu/param",
      method:"post",
      data:id
    }).then((res)=>{
      // console.log(res)
      if (res.data.code==0){
        this.paramList = res.data.list
        this.paramDialog = true
      }
    })

  },
  ware(id){
    this.wareDialog = true
    this.$http({
      url:"product/spu/ware",
      method:"post",
      data:id
    }).then((res)=>{
      console.log(res)
      if (res.data.code==0){
        this.skulist = res.data.list
        this.wareDialog = true
      }

    })
  },
  routerAdd(){
    this.$router.push('/addShop')
  }


},
//声明周期 - 创建完成（可以访问当前this实例）
created() {
  this.getSpuList()
},
//声明周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.param-cont{
  line-height: 0;
}
.table{
  line-height: 5px;
}
.imgflolt{
  width: 400px;
  height: 400px;
  /*background-color: red;*/
  border: 0;
  position: absolute;
  top: 25%;
  left: 45%;
  overflow: hidden;

}
.imgflolt>img{
  border-radius: 15px;
}
.hearder{
  display: flex;
  width: 100%;
  height: 100px;
  /*background-color: #FBAB7E;*/
}
.search{
  display: flex;
  margin: 25px;
  width: 350px;
  height: 50px;
  /*background-color: red;*/
}
.search>input{
  width: 200px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  border-radius: 10px;
  color: #99A3A4;
  font-size: 17px;
  border: 1px solid #409eff;
  outline-color: #48dd68;
}
.add{
  display: flex;
  margin-top: 25px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  width: 100px;
  border-radius: 5px;
  color: #ffffff;
  font-size: 16px;
  background-color: #EC7063;
}
.add>div{
  width: 35px;
  height: 50px;
  text-align: right;
  line-height: 50px;
}
.add:active{
  background-color: #2AF598;
}
.param{
  margin: 0 auto;
  width: 90%;
  /*height: 500px;*/
  max-height: 650px;
  overflow-y: auto;
  /*background-color: #2AF598;*/
}
.param-item{
  margin: 5px auto;
  height: 40px;
  width: 100%;
  border: 1px solid #99A3A4;
  /*background-color: #08AEEA;*/

}
.itemleft{
  margin-left: 4px;
  width: 30%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-right:1px solid #99A3A4 ;
  border-bottom: 1px solid #99A3A4 ;
  /*background-color: red;*/
}
.itemright{
  width: 69%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-bottom: 1px solid #99A3A4 ;
  overflow:hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

  -o-text-overflow:ellipsis;
  /*background-color: #4970af;*/
}
.param-item1{
  display: flex;
  width: 100%;
  height: 40px;
  /*background-color: #08AEEA;*/

}
</style>
